<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body class="body">
    <!-- 头部 -->
    <header class="header">
        <div>
           <p>户外跑</p>
            <h2>
            运动中
            </h2> 
        </div>
        <!-- 图标 -->
        <div class="icon">
            <span class="iconfont icon-yinle"></span>
            <span class="iconfont icon-zhankai"></span>
        </div>
    </header>
    <!-- 公里数 -->
    <section class="km">
        <h1>99.99<span>公里</span>  </h1>
    </section>
    <!-- gps信号 -->
    <section class="gps">
        GPS信号强度低,数据精准度低 &nbsp; -------------&nbsp;
        <span class="iconfont icon-ditu"></span>
    </section>
    <!-- 状态 -->
    <section class="state">
        <!-- 配速 -->
        <div>
            <span class="iconfont icon-peisu"></span>
            配速
            <article>
                --
            </article>
        </div>
        <!-- 用时 -->
        <div>
            <span class="iconfont icon-yongshi"></span>
            用时
            <article>
                00:00:20
            </article>
        </div>
        <!-- 千卡 -->
        <div>
            <span class="iconfont icon-qianka"></span>
            千卡
            <article>
                3000
            </article>
        </div>
    </section>
    <!-- 足部 -->
    <footer class="footer">
        <!-- 用来站位的 -->
        <section class="suo"></section>
        <section class="control">
            <span class="iconfont icon-zanting"></span>
            暂停
        </section>
        <section class="suo">
            <span class="iconfont icon-suo"></span>
        </section>
    </footer>
</body>
</html>